<script setup>
// 消耗提示组件
import baseModel from "@/components/baseModel/baseModel.vue";
import { computed, ref } from "vue";
import request from "@/common/utils/request";
import { useRouter } from "vue-router";
const router = useRouter();
const props = defineProps({
  consumes: {
    type: Number,
    default: 0,
  },
  usable: {
    type: Number,
    default: 1,
  },
  useNum: {
    type: Number,
    default: 1,
  },
  unit: {
    type: String,
    default: "",
  },
  name_unit: {
    type: String,
    default: "",
  },
  // 使用项的名称
  infoName:{
  type: String,
  default: "",
  }
});

const emit = defineEmits(["handleOk", 'topUp']);
const dialog = ref(null);

const infoData = ref({});
const infoindex = ref("");
const showModal = (data, index) => {
  if (data) {
    infoData.value = data;
  }
  if (index || index == 0) {
    infoindex.value = index;
  }
  dialog.value.showModal();
};

const closeModal = () => {
  dialog.value.closeModal();
};

// 确认提交
const handleOk = () => {
  emit("handleOk", infoData.value, infoindex.value);
  dialog.value.closeModal();
};

// 去充值
const goTopup = () => {
  emit("topUp");
  closeModal();
};

defineExpose({
  showModal,
  closeModal,
});
</script>

<template>
  <div>
    <baseModel ref="dialog" :contentWidth="620">
      <template #title>
        <div>
          <span style="font-weight: 600">确认生成</span>
        </div>
      </template>
      <template #content>
        <div class="content">
          <div v-if=" props.usable !== 0 ">
            <span>您剩余{{ props.name_unit }}为</span>
            <span style="color: red">{{ props.useNum }} </span>{{ props.unit }}
            <span>本次{{ props.infoName }}消耗
              <span style="color: var(--ss-primary-color)">{{
                props.consumes
                }}</span>
              {{ props.unit }}{{ props.name_unit }}</span>
          </div>

          <div v-if=" props.usable == 0 ">
            当前{{ props.name_unit }}不足,
          </div>

          <!--   
          v-if="props.consumes > props.useNum || props.usable == 0"
          -->
          <a-button type="link" @click="goTopup" v-if="props.consumes > props.useNum || props.usable == 0" style="padding: 0; line-height: 1; margin-left: 5px;"> 点击前往充值</a-button>
        </div>
      </template>
      <template #footer>
        <a-button v-if="props.consumes <= props.useNum && props.usable !== 0" key="back" @click="handleOk"
          type="primary">确定</a-button>
        <a-button key="back" @click="closeModal">取消</a-button>
      </template>
    </baseModel>
  </div>
</template>

<style lang="less" scoped>
.content {
  font-weight: 600;
  display: flex;
  align-items: center;

  .tips_title {
    font-size: 14px;
    color: #5d5d5d;
  }
}
</style>
